<template>
	<div class="choice-item">
		
		<div class="info">
			<span class="tit">{{ question.weight }} {{questiontype}}<span style="color:#e6a23c;">（{{ question.subjectScore }}分）</span></span>
		</div>
		<div class="question-content">
			<div class="content-render" v-html="question.subjectName"></div>
		</div>
		<div class="choice-box">
			<div class="input-title">我的作答</div>
			<textarea v-model="val" placeholder="请输入你的答案" @blur="change" class="input" maxlength="-1"></textarea>
		</div>
		
	</div>
</template>
<script>
	export default {
		props: [
			'subindex',
			'qindex',
			'question',
			'questiontype',
			'reply',
		],
		data() {
			return {
				val: null,
			};
		},
		mounted() {
			if(this.question.userAnswer !== undefined){
				this.val = this.question.userAnswer
			}
		},
		methods: {
			change() {
				// this.$emit('update', this.subindex,this.qindex,this.val)
				if(this.val){
					this.$emit('update', this.subindex,this.qindex,this.val,this.question.examAnswerId)
				}
				
			}
		},
	};
</script>
<style lang="less" scoped>
	.spcolor {
		background: #f4fafe !important;
	}

	.choice-item {
		background-color: #f1f2f6;
		width: 100%;

		.preview-image {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 400;
			padding: 15px;
			background-color: #000000;
			display: flex;
			align-items: center;

			.back-detail {
				position: absolute;
				top: 15px;
				left: 15px;
				width: 19px;
				height: 19px;
				cursor: pointer;
			}

			.delete-img {
				position: absolute;
				top: 15px;
				right: 15px;
				width: 24px;
				height: 24px;
				cursor: pointer;
			}

			.pic-item {
				width: 100%;
				height: 100%;

				.pic {
					width: 100%;
					height: 100%;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center center;
				}
			}
		}

		.info {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px 30px 0px 30px;
			background-color: #fff;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			/* Firefox */
			-webkit-box-sizing: border-box;

			/* Safari */
			.tit {
				height: 18px;
				font-size: 18px;
				font-weight: 500;
				color: #666666;
				line-height: 18px;
			}
		}

		.question-content {
			width: 100%;
			height: auto;
			font-size: 15px;
			font-weight: 400;
			color: #333333;
			line-height: 24px;
			padding: 15px 30px 0px 30px;
			background-color: #fff;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			/* Firefox */
			-webkit-box-sizing: border-box;
			/* Safari */
		}

		.choice-box {
			width: 100%;
			height: auto;
			float: left;
			box-sizing: border-box;
			padding:15px 30px;
			background-color: #fff;

			.input-title {
				width: 100%;
				height: 15px;
				font-size: 15px;
				font-weight: 500;
				color: #333333;
				line-height: 15px;
				margin-bottom: 15px;
			}

			.input {
				width: 100%;
				height: 200px;
				border-radius: 4px;
				border: 1px solid #e5e5e5;
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				line-height: 24px;
				outline: none;
				resize: none;
				padding: 15px;
				background-color: #fff;
			}

			.input::-webkit-input-placeholder {
				color: #ccc;
			}

			.images-box {
				width: 100%;
				height: auto;
				float: left;
				box-sizing: border-box;
				margin-top: 20px;
				display: grid;
				gap: 15px;
				grid-template-columns: repeat(6, minmax(0, 1fr));

				.image-item {
					width: 165px;
					height: 124px;
					text-align: center;

					.image-view {
						width: 165px;
						height: 124px;
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center center;
					}
				}

				.upload-image-button {
					width: 165px;
					height: 124px;
					background-color: #f1f2f6;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					img {
						width: 50px;
						height: 50px;
					}

					#file_input {
						position: absolute;
						top: 0;
						left: 0;
						width: 165px;
						height: 124px;
						opacity: 0;
					}
				}
			}
		}
	}
</style>
